<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>科室管理</title>
    <!--引入elementui得样式-->
    <link type="text/css" rel="stylesheet" href="/css/index.css"/>
    <!--引入vue得依赖必须再elementui之前引入vue-->
    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/index.js"></script>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <script type="text/javascript" src="/js/qs.min.js"></script>
</head>
<body >
<div id="app">
    <el-button type="primary" icon="el-icon-plus" @click="addEmp">添加
    </el-button>
    <el-dialog title="提示"
               :visible.sync="dialogVisible1"
               width="30%">
        <el-form  label-width="80px" :model="addForm">
            <el-form-item label="部门名字" prop="deptName">
                <el-input v-model="addForm.deptName"></el-input>
            </el-form-item>
            <el-form-item label="部门状态" prop="deptStatus">
                <el-input v-model="addForm.deptStatus"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible1 = false">取 消</el-button>
                        <el-button type="primary" @click="add">确认添加</el-button>
                      </span>
    </el-dialog>
    <el-table
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                prop="deptId"
                label="编号"
                width="100">
        </el-table-column>
        <el-table-column
                prop="deptName"
                label="部门"
                width="180">
        </el-table-column>
        <el-table-column
                prop="deptStatus"
                label="状态">
            <template slot-scope="scope">
                <p v-if="scope.row.deptStatus=='1' " style="color: red">
                    离职
                </p >
                <p v-else-if="scope.row.deptStatus=='0'" style="color: lightgreen">
                    在职
                </p >
            </template>
        </el-table-column>


        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button type="success" @click="editEmp(scope.row)">修改</el-button>
                <el-button type="danger" @click="del(scope.row)">删除</el-button>
                <el-button type="info" @click="upp(scope.row)">修改状态</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-dialog title="提示"
               :visible.sync="dialogVisible"
               width="30%">
        <el-form  label-width="80px" :model="editForm">
            <el-form-item label="部门名字" >
                <el-input v-model="editForm.deptName"></el-input>
            </el-form-item>
            <el-form-item label="部门状态" >
                <el-input v-model="editForm.deptStatus"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="confirmUpdate">确认修改</el-button>
                      </span>
    </el-dialog>

</div>
</body>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            tableData:[],
            dialogVisible01:false,
            dialogVisible1:false,
            dialogVisible:false,
            addForm:{},
            editForm:{},
            data:[],
            depts:[],
            checkIds:[],
            total:0,
            QueryDep:{},
        },
        created(){
            this.showRoleDialog();

        },
        methods:{
            showRoleDialog() {
                this.dialogVisible01=true;
                //查询所有部门
                axios.get("/dept/checkDept").then(resp=>{
                    this.tableData=resp.data.data;
                    this.checkRole=resp.data.data.roleIds;
                    console.log(resp.data);
                })
            },
            dialogClose(){
                this.$refs.addFormRef.resetFields();
            },
            addEmp(){

                this.dialogVisible1=true;
                axios.get("/dept/checkDept").then(resp=>{
                    this.depts=resp.data.data;
                })
            },
            add(){
                console.log(this.addForm)
                axios.post("/dept/add",this.addForm).then(resp=>{
                    if(resp.data.code===200){
                        this.$message.success("添加成功")
                        this.dialogVisible1=false;

                    }
                })
            },
            del(row){
                // console.log(row);
                axios.get("/dept/delete?id="+row.deptId).then(resp=>{
                    if(resp.data.code ===200){
                        this.$message.success("删除成功");
                        this.showRoleDialog();
                    }else {
                        this.$message.success("删除失败");
                    }
                })
            },

            editEmp(row){
                this.editForm=row;
                this.dialogVisible=true;
                axios.get("/dept/checkDept").then(resp=>{
                    this.depts=resp.data.data;
                })
            },
            confirmUpdate(){
                console.log(this.editForm)
                axios.post("/dept/update",this.editForm).then(resp=>{
                    if(resp.data.code===200){
                        this.$message.success("修改员工信息成功")
                        this.dialogVisible=false;
                        this.showRoleDialog();
                    }
                })
            },
            upp(row){
                axios.post("/dept/updateStatus",row).then(resp=>{
                    {
                        this.$message.success("修改状态成功")
                        this.showRoleDialog();
                    }
                })
            }



        }
    })
</script>
</html>